React Native 问题记录

发表于 | 分类于 |

期间出现的一些报错问题

_reactNavigation. NavigationActions.navigate is not a function

这是错误代码，老版本更新到2.55版本之后出现的问题

1
2
3
4
5
6
7
8
9
10
static resetToHomePage(params) {
       const {navigation} = params;
       const resetAction = NavigationActions.navigate({
           index: 0,
           action: [
               NavigationActions.navigate({
                   routeName: "HomePage",
               })
           ]
       });

会报如下错误

在 react-navigation 的 issue 上也有人碰到这么个问题，而且也得到了解决，意思就是用 StackActions.reset 代替 NavigationActions.navigate，替代之后又出了个新问题

cannot read property 'map ' of undefined,最后找到了解决办法如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
static resetToHomePage(params) {
       const {navigation} = params;
       const resetAction = StackActions.reset({
           index: 0,
           action: [
               NavigationActions.navigate({
                   routeName: "HomePage",
               })
           ]
       });
       navigation.dispatch(NavigationActions.navigate({
           routeName:"HomePage",
           action:resetAction,
       }));
   }

终端执行 react-native run-ios出现

1
2
xcrun: error: unable to find utility "instruments"
not a developer tool or in PATH

解决办法:终端执行

1
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/

版本兼容问题

1
2
You are currently running Node v6.9.1 but React Native requires >=8. 
Please use a supported version of Node.

解决办法:

1
2
sudo npm install -g n
sudo n stable

前一段时间还正常，今天跑起来忽然就出现这个错误 No bundle URL present

解决办法: 项目根目录下依次执行

1
2
3
4
rm -rf ios/build/                 
kill $(lsof -t -i:8081)
react-native run-ios
#删掉build文件，杀掉其他 RN sessions 确保它们在默认的 8081 端口上执行

有时候新开一个项目跑起来还是上次的项目，也可以用上面指令依次跑一下

Failed to load bundle(…)

这个错误出现的次数比较多，一看到前面bundle(http…)第一反应就是 端口被占用啥的，其实被占用大部分情况下报的是 No Bundle URL Present ，就是上面那种情况，这里的这个问题关键在后面Unexpected token,语法错误，然后找了一下终端运行终止的地方，找到了问题所在

这里能看到对应的错误信息然后去修改就好了。
如果没有错误信息，那就是服务确实没启动了，执行react-native start 或者npm start,然后刷新界面.

React.Children.only expected to receive a single React element child

这个错误在我添加 TabNavigator.Item 时出现的，下面这个是报错的写法

1
2
3
4
5
6
7
<TabNavigator.Item 
               title={title}
              //.....
/>
//注释位置
 </TabNavigator.Item>

正确写法，在注释位置添加一个子组件就行了，比如

1
2
3
4
5
6
7
8
<TabNavigator.Item 
               title={title}
              //.....
/>
<View></View>
            </TabNavigator.Item>

图片路径问题. files not exist

项目里明明有图片，但是找不到报错，这个一般就是引用的层级问题了

比如现在的目录是这样

然后在homePage 页需要加载图片，调用如下

1
2
3
4
. 表示当前目录
.. 表示当前目录一级目录
./表示当前目录下的某个文件或文件夹，视后面跟着的名字而定
../表示当前目录上一级目录的文件或文件夹

Malformed calls from JS: field sizes are different

这个错误网上碰到的也是各种情况都有，下面是错误代码

1
2
3
4
5
6
7
8
removeFavoriteItem(key){
        AsyncStorage.setItem(key,(error) => {
            if (!error) {
                this.updateFavoriteKeys(key,false);
            }
        })
    }

这里其实就是AsyncStorage.setItem漏传了个参数，看下源码实现会发现需要传(key,value)俩个参数

我这里是粗心，本来是要调用AsyncStorage.removeItem(key,(error)，这样就OK了。 RN很多错误都是粗心造成的，而且提示不太友好，踩坑前行

加载网页图片不显示
The resource could not be loaded because the App Transport Security policy requires the use of a secure connection

iOS9之后引入了新特性App Transport Security (ATS)。详情：App Transport Security (ATS)

新特性要求App内访问的网络必须使用HTTPS协议。
但是图片链接使用的是HTTP协议，所以无法加载出来

解决办法：

  1. 在Info.plist中添加NSAppTransportSecurity类型Dictionary。
  2. 在NSAppTransportSecurity下添加NSAllowsArbitraryLoads类型Boolean,值设为YES

非 iOS 开发可能会看不太懂

这里借用网上的俩张图看的更清楚些